<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问内容</title>
    <script>
        function f1(){
            let btn = document.getElementById("btn");
            // 取值
            // innerText:不识别标签
            // 获取的标签体内容不包含子标签,只有最终的文本内容
            console.log("标签体内容:"+btn.innerText);
            // 赋值
            btn.innerText = "修改后的内容";

            let d1 = document.getElementById("d1");
            d1.innerText = "div改变了";

            let d2 = document.getElementById("d2");
            console.log(d2.innerText);

            // 赋值时如果赋值的内容包含标签,赋值时会将标签当做普通字符串在页面中展示
            d2.innerText = "<h1>新的标题</h1>";
        }

        function f2(){
            let d2 = document.getElementById("d2");

            // innerHTML:识别标签
            // 获取的标签体内容包含子标签
            console.log(d2.innerHTML);
            // 赋值时如果赋值的内容包含标签,会在页面中体现出该标签的效果
            d2.innerHTML = "<h1>新的标题</h1>";
        }
    </script>
</head>
<body>
<button id="btn" onclick="f1()">innerText</button>
<button id="btn2" onclick="f2()">innerHTML</button>

<div id="d1">这是一个div</div>
<div id="d2">
    <h1>这是一个div中的标题</h1>
</div>
</body>
</html>